<template>
  <div class="ranking-container">
    <div class="ranking-header">
      <span>排行榜</span>
      <span class="refresh-text">刷新</span>
    </div>
    <div class="ranking-list">
      <div class="ranking-item">
        <div class="ranking-content">印尼高官：美国退出也没关系</div>
      </div>
      <div class="ranking-item">
        <div class="ranking-content">特朗普：正在商谈分割乌克兰土地</div>
      </div>
      <div class="ranking-item">
        <div class="ranking-content">全球商界精英很高兴在中国听到这样的消息：征70%关税也要买中国货！</div>
      </div>
      <div class="ranking-item">
        <div class="ranking-content">美要向中国船只收费，加勒比多国反对</div>
      </div>
      <div class="ranking-item">
        <div class="ranking-content">惊天动地的大事，令中美合作刻不容缓</div>
      </div>
      <div class="ranking-item">
        <div class="ranking-content">美国企业主：征70%关税也要买税也要买中国货！：征70%关税也要买中国货！</div>
      </div>
      <div class="ranking-item">
        <div class="ranking-content">美国企业主：征70%关税也要买关税也要买中国货！：征70%关税也要买中国货！</div>
      </div>
      <div class="ranking-item">
        <div class="ranking-content">美国企业中国货！：征70%关税也要买中国货！：征70%关税也要买中国货！</div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'NewsRecommend',
  components: {}
}
</script>

<style scoped>
/* 主容器Flex布局 */
.ranking-container {
  width: 300px;
  margin-top: 30px;
  display: flex;
  flex-direction: column;
}

/* 标题区域Flex布局 */
.ranking-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 10px;
  padding-bottom: 8px;
  border-bottom: 1px solid #eee;
}

.refresh-text {
  font-size: 14px;
  color: #666;
  font-weight: normal;
  cursor: pointer;
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
}

.refresh-text:hover {
  color: #ff4d4f;
}

/* 列表区域Flex布局 */
.ranking-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 列表项Flex布局 */
.ranking-item {
  display: flex;
  align-items: center;
  transition: color 0.2s ease;
  cursor: pointer;
}

.ranking-item:hover .ranking-content {
  color: #ff4d4f;
}

/* 关键修改：单行显示 + 溢出省略号 */
.ranking-content {
  font-size: 14px;
  line-height: 1.4;
  flex: 1;
  /* 单行溢出省略号 */
  white-space: nowrap;      /* 禁止换行 */
  overflow: hidden;         /* 隐藏溢出内容 */
  text-overflow: ellipsis;  /* 显示省略号 */
  /* 保持原有样式 */
  transition: color 0.2s ease;
  color: inherit;
}
</style>